<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-card">
        <div class="register-header">
          <h1 class="register-title">用户注册</h1>
          <p class="register-subtitle">加入娱乐票务系统，享受精彩演出</p>
        </div>
        
        <form @submit.prevent="handleRegister" class="register-form">
          <div class="form-group">
            <label for="username" class="form-label">用户名</label>
            <input
              id="username"
              v-model="form.username"
              type="text"
              class="form-input"
              :class="{ 'error': errors.username }"
              placeholder="请输入用户名（用于登录）"
              required
            />
            <span v-if="errors.username" class="error-message">{{ errors.username }}</span>
          </div>
          <div class="form-group">
            <label for="name" class="form-label">姓名</label>
            <input
              id="name"
              v-model="form.name"
              type="text"
              class="form-input"
              :class="{ 'error': errors.name }"
              placeholder="请输入您的姓名"
              required
            />
            <span v-if="errors.name" class="error-message">{{ errors.name }}</span>
          </div>
          
          <div class="form-group">
            <label for="email" class="form-label">邮箱地址</label>
            <input
              id="email"
              v-model="form.email"
              type="email"
              class="form-input"
              :class="{ 'error': errors.email }"
              placeholder="请输入邮箱地址"
              required
            />
            <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
          </div>
          
          <div class="form-group">
            <label for="phone" class="form-label">手机号码</label>
            <input
              id="phone"
              v-model="form.phone"
              type="tel"
              class="form-input"
              :class="{ 'error': errors.phone }"
              placeholder="请输入手机号码"
              required
            />
            <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
          </div>
          
          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="password-input">
              <input
                id="password"
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                :class="{ 'error': errors.password }"
                placeholder="请输入密码（至少6位）"
                required
              />
              <button
                type="button"
                @click="showPassword = !showPassword"
                class="password-toggle"
              >
                {{ showPassword ? '隐藏' : '显示' }}
              </button>
            </div>
            <span v-if="errors.password" class="error-message">{{ errors.password }}</span>
          </div>
          
          <div class="form-group">
            <label for="confirmPassword" class="form-label">确认密码</label>
            <div class="password-input">
              <input
                id="confirmPassword"
                v-model="form.confirmPassword"
                :type="showConfirmPassword ? 'text' : 'password'"
                class="form-input"
                :class="{ 'error': errors.confirmPassword }"
                placeholder="请再次输入密码"
                required
              />
              <button
                type="button"
                @click="showConfirmPassword = !showConfirmPassword"
                class="password-toggle"
              >
                {{ showConfirmPassword ? '隐藏' : '显示' }}
              </button>
            </div>
            <span v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</span>
          </div>
          
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="form.agreeTerms" type="checkbox" class="checkbox" required>
              <span class="checkbox-text">
                我已阅读并同意
                <a href="#" class="terms-link">《用户协议》</a>
                和
                <a href="#" class="terms-link">《隐私政策》</a>
              </span>
            </label>
            <span v-if="errors.agreeTerms" class="error-message">{{ errors.agreeTerms }}</span>
          </div>
          
          <button
            type="submit"
            class="register-button"
            :disabled="userStore.loading"
          >
            <span v-if="userStore.loading" class="loading-spinner"></span>
            {{ userStore.loading ? '注册中...' : '立即注册' }}
          </button>
          
          <div v-if="userStore.error" class="error-alert">
            {{ userStore.error }}
          </div>
        </form>
        
        <div class="register-footer">
          <p class="login-prompt">
            已有账号？
            <RouterLink to="/login" class="login-link">立即登录</RouterLink>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { useToastStore } from '@/stores/toast'
import { useFormValidator, required, minLength, pattern, email, equalsTo, phoneCN } from '@/utils/useFormValidator'

const router = useRouter()
const userStore = useUserStore()
const toast = useToastStore()

const showPassword = ref(false)
const showConfirmPassword = ref(false)

const form = reactive({
  username: '',
  name: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  agreeTerms: false
})

const { errors, validate } = useFormValidator(form, {
  username: [
    required('请输入用户名（用于登录）'),
    pattern(/^[A-Za-z0-9_]{3,20}$/, '用户名需为3-20位字母/数字/下划线')
  ],
  name: [required('请输入姓名'), minLength(2, '姓名至少2个字符')],
  email: [required('请输入邮箱地址'), email('请输入有效的邮箱地址')],
  phone: [required('请输入手机号码'), phoneCN('请输入有效的手机号码')],
  password: [required('请输入密码'), minLength(6, '密码长度至少6位')],
  confirmPassword: [required('请确认密码'), equalsTo('password', '两次输入的密码不一致')],
  agreeTerms: [required('请同意用户协议和隐私政策')]
})

const handleRegister = async () => {
  if (!validate()) return
  
  const result = await userStore.register({
    username: form.username.trim(),
    name: form.name.trim(),
    email: form.email,
    phone: form.phone,
    password: form.password
  })
  
  if (result.success) {
    // 注册成功，跳转到登录页并提示
    toast.success('注册成功，请登录')
    router.push({ path: '/login', query: { redirect: '/' } })
  } else if (userStore.error) {
    toast.error(userStore.error)
  }
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.register-container {
  width: 100%;
  max-width: 450px;
}

.register-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
}

.register-header {
  text-align: center;
  margin-bottom: 30px;
}

.register-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.register-subtitle {
  color: #666;
  font-size: 14px;
}

.register-form {
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
  }
  
  .form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    
    &:focus {
      outline: none;
      border-color: #667eea;
    }
    
    &.error {
      border-color: #e74c3c;
    }
  }
  
  .password-input {
    position: relative;
    
    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #666;
      cursor: pointer;
      font-size: 14px;
      
      &:hover {
        color: #333;
      }
    }
  }
  
  .error-message {
    display: block;
    color: #e74c3c;
    font-size: 14px;
    margin-top: 4px;
  }
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  
  .checkbox {
    margin-right: 8px;
    margin-top: 2px;
    flex-shrink: 0;
  }
  
  .checkbox-text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
  }
}

.terms-link {
  color: #667eea;
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }
}

.register-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
  }
  
  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-alert {
  background: #fee;
  color: #e74c3c;
  padding: 12px;
  border-radius: 6px;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
}

.register-footer {
  margin-top: 30px;
  text-align: center;
}

.login-prompt {
  color: #666;
  font-size: 14px;
}

.login-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  
  &:hover {
    text-decoration: underline;
  }
}
</style>
  // 验证用户名
  if (!form.username.trim()) {
    errors.username = '请输入用户名'
    isValid = false
  } else if (form.username.trim().length < 3) {
    errors.username = '用户名至少3个字符'
    isValid = false
  }